import { throttle } from '../../../utils/vutils.js'

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    timeList: {
      type: Array,
      observer: function (newVal) {}
    },
    activeIndex: {
      type: Number,
      // observer: function (newVal) {
      //   this.setData({
      //     selectIndex: newVal
      //   })
      // }
    },
    currentIndex: {
      type: Number,
      observer: function (newVal) {
        this.setData({
          selectIndex: newVal
        })
        this.scrollIntoView()
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    selectIndex: 0, // 当前选择的时间段的index
    scrollLeft: 0, // 设置scroll-viwe横向滚动条位置
    activeItemFixedStyle: '', // 热抢中或者即将开始的最近一个时间段 的样式
    isShowActiveItem: false // 是否显示定位的 热抢中或者即将开始的最近一个时间段
  },

  ready () {
    // this.scrollIntoView()
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 时间段点击
    onClickTime: function (event) {
      const {
        index,
        info
      } = event.currentTarget.dataset
      if (index !== this.data.selectIndex) {
        this.setData({
          selectIndex: index
        })
        this.scrollIntoView()
        this.triggerEvent("change", info)
      }
    },
    // 滚动到可见区域
    scrollIntoView() {
      const { selectIndex } = this.data;
      Promise.all([
        this.getRect('.seckill-item', true),
        this.getRect('.seckill-list')
      ]).then(([seckillItemsRect, seckillListRect]) => {
        const seckillItem = seckillItemsRect[selectIndex];
        const offsetLeft = seckillItemsRect
          .slice(0, selectIndex)
          .reduce((prev, curr) => prev + curr.width, 0);
        this.setData({
          scrollLeft: (offsetLeft - (seckillListRect.width - seckillItem.width) / 2)
        });
      }).catch(err => {
        console.log(`err`, err)
      });
    },
    // 监听 scroll-view 滚动
    // onSeckillTimeScroll(event) {
    //   let scrollLeft = event.detail.scrollLeft
    //   Promise.all([
    //     this.getRect('.seckill-item', true),
    //     this.getRect('.seckill-list')
    //   ]).then(([seckillItemsRect, seckillListRect]) => {
    //     const { activeIndex } = this.properties
    //     const activeLeft = seckillItemsRect
    //       .slice(0, activeIndex)
    //       .reduce((prev, curr) => prev + curr.width, 0);
    //     // scroll-view 中定位存在问题，所以在scrol-viwe外定位
    //     if (activeLeft - scrollLeft + seckillItemsRect[activeIndex].width > seckillListRect.width + 10) {
    //       // 当前热抢中的时间段，移动到超出了显示区域最右侧，则定位到显示区域最右侧显示
    //       this.setData({
    //         isShowActiveItem: true,
    //         activeItemFixedStyle: `position: absolute; top: 0; bottom: 0; right: 0; box-shadow: -5rpx 0 10rpx -5rpx #000;`
    //       })
    //     } else if (activeLeft - scrollLeft < -10) {
    //       // 当前热抢中的时间段，移动到超出了显示区域最左侧，则定位到显示区域最左侧显示
    //       this.getRect('.seckill-title').then(res => {
    //         console.log(`seckill-title res`, res), 
    //         this.setData({
    //           isShowActiveItem: true,
    //           activeItemFixedStyle: `position: absolute; top: 0; bottom: 0; left: ${res.width}px; box-shadow: 5rpx 0 10rpx -5rpx #000;`
    //         })
    //       })
    //     } else {
    //       // 当前热钱中的事件单，处于显示区域中，则不做定位操作
    //       this.setData({
    //         isShowActiveItem: false,
    //         activeItemFixedStyle: ``
    //       })
    //     }
    //   }).catch(err => {
    //     console.log(`err`, err)
    //   });
    // },
    // 获取节点信息的对象
    getRect(selector, all) {
      return new Promise(resolve => {
        wx.createSelectorQuery()
          .in(this)[all ? 'selectAll' : 'select'](selector)
          .boundingClientRect(rect => {
            if (all && Array.isArray(rect) && rect.length) {
              resolve(rect);
            }
            if (!all && rect) {
              resolve(rect);
            }
          })
          .exec();
      });
    }
  }
})